<template>
  <div class="app-container" v-loading="isLoading">
		<el-row :gutter="13">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="container_box">
    		<div class="box_tit">
    				 <p><span @click="changeDayType(3)">3天</span><span @click="changeDayType(7)">7天</span><span @click="changeDayType(30)">30天</span></p>
	        	 <h3>实时访客人数</h3>
	        </div>
	        <div class="box_c">
	        	<line-chart :chart-data="lineChartData"/>
	        	<p>今日访客：  <strong>{{todayVisitorNum}}</strong></p>
	        </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
	    	<div class="container_box">
		        <div class="box_c1">
	        		<i class="iconfont icon-wode"></i>
	        		<h3>访客数</h3>
	        		<h1>{{currentVisitorNum}}</h1>
	        		<p>昨日全天 <span>{{yesterdayVisitorNum}}</span></p>
		        </div>
	        </div>
	        <div class="container_box mt13">
		        <div class="box_c1">
	        		<i class="iconfont icon-liulan"></i>
	        		<h3>浏览量</h3>
	        		<h1>{{currentBrowseNum}}</h1>
	        		<p>昨日全天 <span>{{yesterdayBrowseNum}}</span></p>
		        </div>
	        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
      	 	<div class="container_box">
		        <div class="box_c2">
	        		<i class="iconfont icon-quan"></i>
	        		<h3>新增用户</h3>
	        		<h1>{{todayUserNums}}</h1>
		        </div>
        	</div>
      </el-col>
    </el-row>

    <div class="container_box mt13">
     	<div class="box_tit">
        	 <h3>数据总汇</h3>
        </div>
        <ul class="box_c3">
        	 <li>
        	 		<h3>总浏览量</h3>
        	 		<h1>{{totalBrowseNum}}</h1>
        	 </li>
        	 <li>
        	 		<div class="right">
        	 			<p>已上架{{totalUpBooks}}</p>
        	 			<p>未上架{{totalDownBooks}}</p>
        	 		</div>
        	 		<h3>书籍总量</h3>
        	 		<h1>{{totalBooks}}</h1>
        	 </li>
        	 <li>
        	 		<h3>用户总数</h3>
        	 		<h1>{{userNums}}</h1>
        	 </li>
        </ul>

    </div>

  </div>
</template>

<script>
 import LineChart from './components/DataLineChart'
import {dataStatistics} from "../../api";

 export default {
  name: 'DashboardAdmin',
  components: {  LineChart },
  data() {
    return {
      lineChartData: {
        series: [],
        xaxis: [],
        legend:[]
      },
      totalBrowseNum:0,//总浏览器 浏览数量
      yesterdayBrowseNum:0,//昨天浏览器 浏览数量
      totalVisitorNum:0,//总访客数
      yesterdayVisitorNum:0,//昨日访客数
      todayVisitorNum:0,//今日访客数
      totalUpBooks:0,//上架书
      totalDownBooks:0,//下架书
      totalBooks:0,//总书籍
      userNums:0,//用户总数
      todayUserNums:0,//进入新增
      currentVisitorNum:0,
      currentBrowseNum:0,
      isLoading:false,
      params:{
      	type:0
      }
    }
  },
  methods: {
    async initData() {
      this.isLoading = true;
      // this.lineChartData = {
      // 		series: [],
      //   	xaxis: [],
      //   	legend:[]
      //   }
      let resp = await dataStatistics(this.params)
      console.log("index stat==>", resp)
      if(this.qUtil.validResp(resp)) {

        this.lineChartData.series = resp.data.series || [];
        this.lineChartData.xaxis = resp.data.xaxis || [];
        this.lineChartData.legend = resp.data.legend || [];
        this.totalBrowseNum = resp.data.totalBrowseNum || 0;
        this.yesterdayBrowseNum = resp.data.yesterdayBrowseNum || 0;
        this.totalVisitorNum = resp.data.totalVisitorNum || 0;
        this.yesterdayVisitorNum = resp.data.yesterdayVisitorNum || 0;
        this.todayVisitorNum = resp.data.todayVisitorNum || 0;

        this.totalUpBooks = resp.data.totalUpBooks || 0
        this.totalDownBooks = resp.data.totalDownBooks || 0
        this.totalBooks = resp.data.totalBooks || 0
        this.userNums = resp.data.userNums || 0
        this.todayUserNums = resp.data.todayUserNums || 0

        this.currentVisitorNum = resp.data.currentVisitorNum || 0
        this.currentBrowseNum = resp.data.currentBrowseNum || 0

      }
      this.isLoading = false;
    },
    changeDayType(type) {
    	this.params.type = type;
    	this.initData();
    }
  },
  mounted(){
    this.initData()
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.container_box{
		background: #fff;
		height: auto;
		overflow: hidden;
		border-radius:10px;
		padding:20px 30px 30px 30px;
		-webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    /* box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05); */
	}
	.container_box .box_tit{
		width: 100%;
		height: auto;
		overflow: hidden;
	}
	.container_box .box_tit h3{
	    font-size: 20px;
	    float: left;
	    color: #333;
	    border-left:3px #2BB89A solid;
	    padding-left:10px;
	    margin-right: 10px;
	}
	.container_box .box_tit p{
		color: #808080;
		margin: 27px 0 0 0px;
		font-size: 16px;
		float: right;
	}
	.container_box .box_tit p span{
		margin-left: 20px;
		cursor: pointer;
	}
	.container_box .box_c{height:400px; overflow: hidden;}
	.container_box .box_c p{
		font-size: 16px;
		color: #999;
		text-align: right;
		margin:0 10px 0 0;
	}
	.container_box .box_c p strong{
		font-size:40px;
		color: #333;
	}
	.mt13{margin-top: 13px;}
	.container_box .box_c1{height: 200px; padding-left:10px; overflow: hidden;}
	.container_box .box_c1 i{
		float: right;
		display: block;
		text-align:center;
		width:60px;
		height: 60px;
		line-height: 60px;
		font-size: 30px;
		color: #fff;
		background: #d5d8d7;
		border-radius: 100%;
		margin-top: 20px;
	}
	.container_box .box_c1 h3{
		font-size: 16px;
		color: #333;
		font-weight: normal;
	}
	.container_box .box_c1 h1{
		font-size:60px;
		color: #333;
		margin: 0;
	}
	.container_box .box_c1 p{
		font-size: 16px;
		color: #999;
		margin-top: 50px;
	}
	.container_box .box_c1 p span{
		font-size: 20px;
		color: #333;
	}
	.container_box .box_c2{ text-align: center; height:463px; overflow: hidden;}
	.container_box .box_c2 i{
		display: block;
		text-align:center;
		width:60px;
		height: 60px;
		line-height: 60px;
		font-size: 30px;
		color: #fff;
		background: #d5d8d7;
		border-radius: 100%;
		margin:120px auto 30px auto;
	}
	.container_box .box_c2 h3{
		font-size: 16px;
		color: #333;
		font-weight: normal;
	}
	.container_box .box_c2 h1{
		font-size:60px;
		color: #333;
		margin: 0;
	}
	.container_box .box_c2 p{
		font-size: 16px;
		color: #34bb9e;
		margin-top:100px;
	}
	.container_box .box_c3{ display: flex; justify-content:flex-start; text-align: center; height:auto; overflow: hidden; min-height:200px;}
	.container_box .box_c3 li{
		 width: 28%;
		 height:150px;
		 margin-right: 2%;
		 padding:20px;
		 text-align: left;
		 border: 1px #ECEAEA solid;
		 border-radius:10px;
	}
	.container_box .box_c3 li h3{
		font-size: 16px;
		color: #666;
		font-weight: normal;
		margin:10px 0;
	}
	.container_box .box_c3 li h1{
			font-size:50px;
			color: #333;
			margin: 0;
	}
	.container_box .box_c3 li .right{
		  float: right;
		  font-size: 14px;
		  color: #999;
		  margin: 25px 0 0 0;
	}
</style>
